var shape1 = new Kinetic.Shape({
  drawFunc: function(canvas) {
    var ctx = canvas.getContext();
    ctx.beginPath();
    ctx.moveTo(131.0, 131.0);
    ctx.lineTo(0.0, 131.0);
    ctx.lineTo(0.0, 0.0);
    ctx.lineTo(131.0, 0.0);
    ctx.lineTo(131.0, 131.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(93, 27, 27)";
    ctx.fill();
    canvas.fillStroke(this);
  },
  name: 'shape1'
});

var shape2 = new Kinetic.Shape({
  drawFunc: function(canvas) {
    var ctx = canvas.getContext();
    ctx.beginPath();
    ctx.moveTo(65.5, 38.3);
    ctx.lineTo(74.4, 56.2);
    ctx.lineTo(94.2, 59.1);
    ctx.lineTo(79.8, 73.0);
    ctx.lineTo(83.2, 92.7);
    ctx.lineTo(65.5, 83.4);
    ctx.lineTo(47.8, 92.7);
    ctx.lineTo(51.2, 73.0);
    ctx.lineTo(36.9, 59.1);
    ctx.lineTo(56.6, 56.2);
    ctx.lineTo(65.5, 38.3);
    ctx.closePath();
    ctx.fillStyle = "rgb(228, 228, 82)";
    ctx.fill();
    canvas.fillStroke(this);
  },
  draggable: true,
  name: 'shape2'
});
var layer1 = new Kinetic.Layer();
layer1.add(shape1);
layer1.add(shape2);

shape2.on('mouseover', function() {
  this.setFill('orange');
  layer1.draw();
  document.body.style.cursor = 'pointer';
});

shape2.on('mouseout', function() {
  this.setFill('yellow');
  layer1.draw();
  document.body.style.cursor = 'default';
});
